<template>
  <div class="page-warp">
    <!-- <pk-header></pk-header> -->
    <div class="page-layout"> 
    <div class="page-layout-conent">
      <div class="page-layout-header pt-24">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/interview' }">{{detailData.job_name}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: getToPath() }">候选人明细</el-breadcrumb-item>
          <el-breadcrumb-item>面试评语: {{ detailData?.candidate_name || '--' }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="page-layout-video">
        <div class="page-layout-videoitem" v-for="(item, index) in detailData?.video_list" :key="index">
          <video :src="item.video_link"  controlsList="nofullscreen nodownload" controls width="300" height="200"></video>
        </div>
      </div>
      <!-- <div class="page-layout-interviewtime flex-row mt-12">
        <div class="mr-12">面试时间: {{ detailData?.interTime }}</div>
        <div class="flex-row align-items-center">
          <span>简历附件：</span>
          <span class="color-blur" @click="">点击预览</span>
          <span class="color-blur">
            <span class="mr-8"><el-icon color="green"><Right /></el-icon></span>
          </span>
        </div>
      </div> -->
      <div class="page-layout-userinfo mt-12">
        <div class="page-layout-userinfoinfo">
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="mb-8">面试时间: {{ detailData?.interTime }}</div>
            </el-col>
            <el-col :span="12">
              <div class="mb-8 flex-row">简历附件： 
                <span class="color-blur flex-row align-items-center" @click="showRemark">点击预览 <span class="mr-8" style="height: 14px;overflow: hidden;"><el-icon size="14"><Right /></el-icon></span></span>               
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="23">
              <div class="mb-8">姓名：{{ detailData?.report?.fullname }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="8">
              <div class="mb-8">性别：{{ detailData?.report?.gender }}</div>
            </el-col>
            <el-col :span="8">
              <div class="mb-8">年龄：{{ detailData?.report?.age }}</div>
            </el-col>
            <el-col :span="8">
              <div class="mb-8">民族：{{ detailData?.report?.nation }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="8">
              <div class="mb-8">工龄：{{ detailData?.report?.jobyear }}年</div>
            </el-col>
            <el-col :span="8">
              <div class="mb-8">籍贯：{{ detailData?.report?.native_place }}</div>
            </el-col>
            <el-col :span="8">
              <div class="mb-8">现居：{{ detailData?.report?.living_in }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="24">
              <div class="mb-8">毕业院校：{{ detailData?.report?.graduate_school }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="24">
              <div class="mb-8 flex-row align-items-center">推荐指数:  
                <div class="ml-8" v-if="show">
                  <el-rate
                    v-model="detailData.report.recommendation"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
                  </el-rate>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="page-layout-matched">
          <el-progress type="dashboard" v-if="show" :percentage="detailData.report.match_score" stroke-width="14" width="200">
            <template #default="{ percentage }">
              <div class="percentage-value flex-row justify-center align-items-center">
                <div class="f-40">{{ percentage }}</div>
              </div>
              <div class="percentage-label f-12 mt-8">匹配度得分</div>
            </template>
          </el-progress>
        </div>
      </div>
      <!-- <div class="page-layout-cell mt-12 flex-row align-items-center">
        <div class="page-layout-cellhd bold">推荐指数:</div>
        <div class="page-layout-cellbd ml-12" v-if="show">
          <el-rate
            v-model="detailData.report.recommendation"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </div>
      </div> -->
      <div class="page-layout-cell mt-12">
        <div class="page-layout-cellhd">面试评语:</div>
        <div class="page-layout-cellbd mt-8">
          候选人专业基础扎实，技能与岗位要求匹配度高，逻辑思维严谨，团队协作意识强。综合表现优异，建议录用。逻辑思维严谨，团队协作意识强。综合表现优异，建议录用。逻辑思维严谨，团队协作意识强。综合表现优异，建议录用。备良好的实操能力和项目经验。教育背景优秀，学习能力突出。
        </div>
      </div>
      <div class="page-layout-cell mt-12">
        <div class="page-layout-cellhd">能力图谱:</div>
        <div class="page-layout-cellbd mt-8">
          <tags-component :tags="detailData.report.tags" v-if="show"></tags-component>
        </div>
      </div>

      <div class="page-layout-canvas mt-12">
        <canvas-component :data="detailData.report.canvas" v-if="show" title="核心竞争力" :desc="detailData.report.competitive_power_desc">
          <radar-component :options="poverOptions"/>
        </canvas-component>
        <canvas-component :data="detailData.report.canvas" v-if="show" title="霍兰德职业兴趣" :desc="detailData.report.holland_occupational_themes_desc" direction="right">
          <radar-component :options="hollandOptions"/>
        </canvas-component>
        <canvas-component :data="detailData.report.canvas" v-if="show" title="大五人格特征" :desc="detailData.report.big_five_personality_traits">
          <radar-component :options="fiveOptions"/>
        </canvas-component>
        <canvas-component :data="detailData.report.canvas" v-if="show" title="MBTI人格类型指标" :desc="detailData.report.myers_briggs_type_indicator_desc"  direction="right">
          <mbti-component :data="detailData.report"></mbti-component>
        </canvas-component>
        <canvas-component :data="detailData.report.canvas" v-if="show" title="大五人格特征" :desc="detailData.report.nine_personality_types_desc">
          <bigfive-component :data="detailData.report"></bigfive-component>
        </canvas-component>
        <canvas-component :data="detailData.report.canvas" v-if="show" title="DISC行位模型" :desc="detailData.report.disc_behavioral_assessment_desc" direction="right">
          <disc-component :data="detailData.report"></disc-component>
        </canvas-component>
      </div>
    </div>
  </div>
  <pk-dialog v-if="showReme" style="width: 600px;">
    <img :src="detailData?.attachment?.source_link" width="100%" />
  </pk-dialog>
  </div>
</template>

<script setup>
import { Right } from '@element-plus/icons-vue'
import { getReport } from '@/api/api'
import { useRoute } from 'vue-router'
import { onMounted, ref, reactive, computed } from 'vue';
// import pkHeader from '@/components/header/header.vue'
import TagsComponent from './component/tag.vue'
import CanvasComponent from './component/canvas.vue'
import radarComponent from './component/radar.vue'
import mbtiComponent from './component/mbti.vue'
import bigfiveComponent from './component/bigfive.vue'
import discComponent from './component/disc.vue'
import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
import { calculatePercentage, getDynamicValues, getAge, getTime } from '@/utils/utils'
const route = useRoute()
const detailData = ref({})
const percentage = ref(80)
const show = ref(false)
const desc = ref("候选人专业基础扎实，技能与岗位要求匹配度高，具备良好的实操能力和项目经验。教育背景优秀，学习能力突出。职业规划清晰，与公司发展方向契合。沟通表达流畅，逻辑思维严谨，团队协作意识强。综合表现优异，建议录用。")
const poverOptions = ref({})
const hollandOptions = ref({})
const fiveOptions = ref({})
const showReme = ref(false)
const getFiveOptions = () => {
  fiveOptions.value = {
    radar: {
      indicator: detailData.value.report.big_five_personality_traits_desc.map(item => {
        return {
          name: item.name,
          max: 100
        }
      })
    },
    legend: {
      data: ['岗位要求', '我的得分']
    },
    series: [
      {
        name: '',
        type: 'radar',
        data: [
        {
          value: detailData.value.report.big_five_personality_traits_desc.map(item => item.cutoff),
          name: '岗位要求',
          lineStyle: {
            color: '#ddd',
            type: 'dashed',
          },
          // 圆点样式配置
          symbol: 'circle', // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
          symbolSize: 8, // 圆点大小
          itemStyle: {
            color: '#ddd' // 圆点颜色
          }
        },
        {
          value: detailData.value.report.big_five_personality_traits_desc.map(item => item.score),
          name: '我的得分',
          lineStyle: {
            color: '#4bc0c0',
          },
          symbol: 'circle', // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
          symbolSize: 8, // 圆点大小
          itemStyle: {
            color: '#4bc0c0' // 圆点颜色
          },
          areaStyle: {opacity: 0.2, color: '#4bc0c0'} 
        }
        ]
      }
    ]
  }
}
const getHollandoccupational = () => {
  hollandOptions.value = {
    radar: {
      indicator: detailData.value.report.holland_occupational_themes.map(item => {
        return {
          name: item.name,
          max: 100
        }
      })
    },
    legend: {
      data: ['岗位要求', '我的得分']
    },
    series: [
      {
        name: '',
        type: 'radar',
        data: [
        {
          value: detailData.value.report.holland_occupational_themes.map(item => item.cutoff),
          name: '岗位要求',
          lineStyle: {
            color: '#ddd',
            type: 'dashed',
          },
          // 圆点样式配置
          symbol: 'circle', // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
          symbolSize: 8, // 圆点大小
          itemStyle: {
            color: '#ddd' // 圆点颜色
          }
        },
        {
          value: detailData.value.report.holland_occupational_themes.map(item => item.score),
          name: '我的得分',
          lineStyle: {
            color: '#ff6384',
          },
          symbol: 'circle', // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
          symbolSize: 8, // 圆点大小
          itemStyle: {
            color: '#ff6384' // 圆点颜色
          },
          areaStyle: {opacity: 0.2, color: '#ff6384'} 
        }
        ]
      }
    ]
  }
}
const getPover = () => {
  poverOptions.value = {
    radar: {
      indicator: detailData.value.report.competitive_power.map(item => {
        return {
          name: item.name,
          max: 100
        }
      })
    },
    legend: {
      data: ['岗位要求', '我的得分']
    },
    series: [
      {
        name: '',
        type: 'radar',
        data: [
        {
          value: detailData.value.report.competitive_power.map(item => item.cutoff),
          name: '岗位要求',
          lineStyle: {
            color: '#ddd',
            type: 'dashed',
          },
          // 圆点样式配置
          symbol: 'circle', // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
          symbolSize: 8, // 圆点大小
          itemStyle: {
            color: '#ddd' // 圆点颜色
          }
        },
        {
          value: detailData.value.report.competitive_power.map(item => item.score),
          name: '我的得分',
          lineStyle: {
            color: '#06c',
          },
          areaStyle: {opacity: 0.2} 
        }
        ]
      }
    ]
  }
}
// 点击浏览
const showRemark = () => {
  debugger
  if(detailData.value?.attachment?.extension == 'pdf') {
    window.open(detailData.value?.attachment?.source_link, '_blank')
  } else {
    showReme.value = true
  }
}
const getInit = () => {
  const { params } = route
  getReport({
    candidate_id: params.id
  }).then(res => {
    let year = new Date().getFullYear();
    detailData.value = {
      ...res.data,
      interTime: getTime(res.data?.video_list[0].created_at, 'time'),
      report: {
        ...res.data.report,
        jobyear: year - res.data.report.date_of_initial_employment,
        age: getAge(res.data.report.birthday),
        myers_briggs_type_indicator: res.data.report.myers_briggs_type_indicator.map(item => {
          let names = item.name.split("-")
          let value = getDynamicValues(item.name)
          let dic = calculatePercentage(item.score)
          return {
            ...item,
            dic: dic,
            value: dic > 50 ? value[1] : value[0],
            names
          }
        })
      }
    }
    getPover()
    getHollandoccupational()
    getFiveOptions()
    show.value = true
  })
}

const getToPath = () => {
  return `/interview/${detailData.value.job_name}/${detailData.value.job_id}` 
}
onMounted(() => {
  getInit()
})
</script>

<style lang="scss" scoped>
.page-layout{
  background: #fff;
  font-size: 14px;
  min-height: 100vh;
  padding-bottom: 60px;
  padding-top: 50px;
  &-conent{
    width: 996px;
    margin: 0 auto;
    overflow: hidden;
  }
  &-video{
    height: 200px;
    margin-top: 24px;
    overflow: hidden;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
  }

  &-videoitem{
    flex: 0 0 auto; /* 不伸缩，固定宽度 */
    width: 300px;
    height: 200px;
    margin-right: 12px;
    border: #ddd 1px solid;
    display: inline-block;
  }
  &-userinfo{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  &-userinfoinfo{
    flex:1
  }
}

@media screen and (max-width: 996px) {
  .page-layout{ 
    // overflow-x:hidden;
    &-conent{
      width: 90%;
      margin: 0 auto
      
    }
    &-userinfo{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    &-userinfoinfo{
      width: 100%;
    }
    &-matched{
      margin: 40px auto;
    }
  }
}
</style>